<template>
    <div class="hit-egg">
        <div class="egg-head">
            <img src="~assets/images/egg_head.jpg" alt="">
        </div>
        <div class="eggs">
            <div class="eggs-btn">
                <p>
                    <img src="~assets/icons/hit.png" alt="">
                    <span>您有</span>
                    <span>{{rules.duo_coin}}</span>
                    <span>次机会</span>
                </p>
            </div>
            <div class="eggs-list">
                <img class="egg-stage" src="~assets/images/bg.png" alt="">
                <div class="egg">
                    <img src="~assets/icons/egg.png" alt="" @click="hitEgg(0)" :class="{moveEgg: eggIndex == 0}">
                    <img src="~assets/icons/egg.png" alt="" @click="hitEgg(1)" :class="{moveEgg: eggIndex == 1}">
                    <img src="~assets/icons/egg.png" alt="" @click="hitEgg(2)" :class="{moveEgg: eggIndex == 2}">
                </div>
            </div>
        </div>
        <div class="rules">
             <div class="award">
                 <div class="award-recode">
                     <p>————— 我的中奖纪录 —————</p>
                     <div class="my-award">
                         <div class="list" v-for="(item,index) in personalAward" :key="index">
                             <span>{{item.name}}</span>
                             <span>{{item.status}}</span>
                         </div>
                     </div>
                     <div class="get-btn" @click="getMyAll">
                         <span>全部领取</span>
                     </div>
                 </div>
                 <div class="award-detail">
                     <p>—————— 中奖名单 ——————</p>
                     <div class="detail-list">
                         <div class="list" v-for="(item,index) in allAward" :key="index">
                             <span>{{item.name}}</span>
                             <span>{{item.nickname}}</span>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="rule-des">
                 <img src="~assets/images/x2.png" alt="">
                 <div class="rule-box">
                     <p>————— 活动规则 —————</p>
                    <p>{{rules.explain}}</p>
                    <!-- <p>2. 活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
                    <p>3. 活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p> -->
                 </div>
             </div>
        </div>
        <div class="award-layer" v-show="showLayer">
            <div class="award-detail-layer">
                <img src="~assets/images/egg.jpg" alt="">
                <div class="award-content">
                    <span>恭喜您获取</span>
                    <span>{{awardContent.name}}</span>
                </div>
                <div class="get-award" @click="getMyAward">
                    <span>领取</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
import { setTimeout } from 'timers';

export default {
    name:'egg',
    data(){
        return {
            clientHeight:0,
            rules:{},
            personalAward:[],
            allAward:[],
            temStatus:{
                0:'待领取',
                1:'已领取'
            },
            eggIndex:100,
            awardContent:'锤子一把',
            showLayer:false
        }
    },
    methods:{
        getMyAll(){
            let that = this;
            let token = localStorage.getItem('token');
            
        },
        eggRule(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.eggRule, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.rules = res.data['msg'];
                    sessionStorage.setItem('activeId', that.rules.id);
                }
            })
        },
        hitEgg(index){
            let that = this;
            let token = localStorage.getItem('token');
            this.eggIndex = index;
            setTimeout(function(){
                that.$ajax(that, 'post', that.$api.eggHited, {'activity_id': that.rules.id}, token, function(res){
                    if(res.data['error_code'] == 0){
                        that.showLayer = true;
                        that.awardContent = res.data.msg;
                        // that.eggRule();
                    }else{
                        that.toast(res.data.msg);
                    }
                    that.eggIndex = 100;
                })
            },1500)
            
        },
        awardMan(){
            let that = this;
            let token = localStorage.getItem('token');
            let id = sessionStorage.getItem('activeId');
            that.$ajax(that, 'get', that.$api.eggAward + id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.personalAward = res.data['msg'];
                    that.personalAward.forEach(item => {
                       item.status = that.temStatus[item.status]; 
                    });
                }
            })
        },
        awardAll(){
            let that = this;
            let token = localStorage.getItem('token');
            let id = sessionStorage.getItem('activeId');
            that.$ajax(that, 'get', that.$api.eggAwardAll + id, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.allAward = res.data['msg'];
                    console.log(that.allAward);
                }
            })
        },
        getMyAward(){
            this.showLayer = false;
            this.awardMan();
        }
    },
    async mounted(){
        let scale = window.devicePixelRatio;
        this.clientHeight = document.documentElement.clientHeight*scale/100;
        this.$store.state.tab = '砸金蛋';
        await this.eggRule();
        await this.awardMan();
        this.awardAll();
    },
    async activated(){
        this.$store.state.tab = '砸金蛋';
        await this.eggRule();
        await this.awardMan();
        this.awardAll();
    },
    components:{
        MessageBox
    }
}
</script>

<style lang='less'>
@rem:100rem;

@keyframes move {
    0% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(-6deg);
    }
    60% {
        transform: rotate(6deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.hit-egg{
    width: 750/@rem;
    margin-top: 88/@rem;
    padding-bottom: 30/@rem;
    background: #fa483e;
    .egg-head{
        width: 750/@rem;
        height: 296/@rem;
        img{
            width: 750/@rem;
            height: 296/@rem;
        }
    }
    .eggs{
        margin-top: 20/@rem;
        .eggs-btn{
            width: 314/@rem;
            height: 72/@rem;
            margin: 0 auto;
            background-image: linear-gradient(0deg, 
                #c84111 0%, 
                #f94710 13%, 
                #d03a09 31%, 
                #a62c01 50%, 
                #ff6600 100%), 
            linear-gradient(
                #613c20, 
                #613c20);
            background-blend-mode: normal, 
                normal;
            box-shadow: 0px 0px 9/@rem 0px 
                rgba(0, 0, 0, 0.75);
            border: solid 2/@rem rgba(255, 255, 255, 0.38);
            border-radius: 36/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            p{
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                    color: #f5b355;
                    font-size: 32/@rem;
                }
                span:nth-of-type(2){
                    color: #ffffff;
                    margin: 0 6/@rem;
                }
            }
            img{
                width: 35/@rem;
                height: 35/@rem;
                margin-right: 18/@rem;
            }
            
        }
        .eggs-list{
            width: 750/@rem;
            height: 352/@rem;
            position: relative;
            margin-top: 20/@rem;
            .egg-stage{
                width: 750/@rem;
                height: 215/@rem;
                position: absolute;
                left: 0;
                bottom: 0;
                
            }
            .egg{
                width: 750/@rem;
                display: flex;
                justify-content: space-around;
                position: absolute;
                z-index: 9999;
                img{
                    width: 217/@rem;
                    height: 241/@rem;
                    
                }
                .moveEgg{
                    animation: move 0.08s infinite;
                }
            }
        }
    }
    .rules{
        width: 642/@rem;
        height: 683/@rem;
        background-color: #f75f57;
        box-shadow: 0px 3/@rem 3/@rem 0px 
            rgba(230, 33, 23, 0.33);
        border-radius: 10/@rem;
        margin: 0 auto;
        position: relative;
        margin-top: 150/@rem;
        .award{
            width: 600/@rem;
            height: 822/@rem;
            background: #ffefef;
            position: absolute;
            left: 21/@rem;
            bottom: 0;
            color: #e9433a;
            overflow: hidden;
            .award-recode{
                margin-top: 30/@rem;
                .my-award{
                    height: 100/@rem;
                    overflow-y: scroll;
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 20/@rem;
                    margin-top: 20/@rem;
                    .list{
                        display: flex;
                        justify-content: space-between;
                    }
                    
                }
                .get-btn{
                    width: 200/@rem;
                    height: 60/@rem;
                    margin: 0 auto;
                    margin-top: 20/@rem;
                    background-color: #fdd113;
                    border-radius: 10/@rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span{
                        color: #ffffff;
                    }
                }
                .get-btn:active{
                    background: #eac111;
                }
            }
            .award-detail{
                .detail-list{
                    width: 100%;
                    height: 80/@rem;
                    overflow-y: scroll;
                    box-sizing: border-box;
                    padding: 0 20/@rem;
                    margin-top: 20/@rem;
                    .list{
                        display: flex;
                        justify-content: space-between;
                        margin-top: 6/@rem;
                    }
                }
            }
        }
        .rule-des{
            width: 642/@rem;
            height: 416/@rem;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 999;
            img{
                width: 642/@rem;
                height: 416/@rem;;
            }
            .rule-box{
                width: 642/@rem;
                height: 380/@rem;
                box-sizing: border-box;
                padding: 0 40/@rem;
                position: absolute;
                left: 0;
                bottom: 0;
                p{
                    font-size: 24/@rem;
                    color: #fdd113;
                }
                p:nth-of-type(2),p:nth-of-type(3),p:nth-of-type(4){
                    text-align: start;
                    margin-top: 30/@rem;
                }
            }
        }
    }
    .award-layer{
        height: 100%;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999;
    }
    .award-detail-layer{
        width: 600/@rem;
        height: 700/@rem;
        border-radius: 20/@rem;
        overflow: hidden;
        background: #ffffff;
        img{
            width: 600/@rem;
        }
        .award-content{
            margin-top: 20/@rem;
            span:nth-of-type(1){
                font-size: 26/@rem;
            }
            span:nth-of-type(2){
                font-size: 32/@rem;
                font-weight: 600;
            }
        }
        .get-award{
            width: 200/@rem;
            height: 80/@rem;
            background: #d03a09;
            border-radius: 12/@rem;
            margin: 0 auto;
            color: #ffffff;
            margin-top: 40/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30/@rem;
        }
        .get-award:active{
            background: #a62c01;
        }
    }
}
</style>
